<template>
    <div class="registerUser">
        <a-input placeholder="Basic username" v-model:value="user.username">
        </a-input>
        <a-input v-model:value="user.phone" placeholder="phone" >
        </a-input>
        <a-input-password v-model:value="user.password" placeholder="input password" >
        </a-input-password>

        <button @click="user.register">注册</button>


        <!-- 管理员用户列表展示 -->
        <div class="userTable">
            <user-table ref="userTable"></user-table>
        </div>
    </div>
</template>

<script>
    import {ref,reactive,getCurrentInstance} from 'vue'
    import {useRoute,useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import userTable from '@/components/manager/userTable.vue'
    export default {
        name: "agisterUser.vue",
        components:{
            userTable
                
        },
        setup(){
            const store =useStore()
            var userTable=ref(null)
            var {proxy} =getCurrentInstance()
            var user=reactive({
                password:'',
                username:'',
                phone:'',
                init:()=>{
                    user.password='',user.username='',user.phone=''
                },
                testUser:()=>{ //校验填写得信息是否符合要求
                if(!user.username||!user.password ||!user.phone) {
                    return false
                 }
                return true
                 },
                register:()=>{
                if(!user.testUser()){
                    proxy.$message.error('请将信息填写完整!')
                     return
                }
                proxy.$request({
                    url:'/userAdmin/create',
                    method:'post',
                    data:{
                        username:user.username,
                        password:user.password,
                        phone:user.phone
                    }
                }).then((res)=>{
                    if(res.data.code!=200) return
                    user.init()                  
                }).finally(()=>{
                   userTable.value.userList.getTableData()
                })
               
            }
            })
            user.init()
        


         

            return {
                user,
                userTable
            }

        }
    }
</script>

<style scoped>
.userTable{
    margin-top: 20px;
}
</style>